/**
 * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
 * Copyright (c) <spug.dev@gmail.com>
 * Released under the AGPL-3.0 License.
 */
import React,{Fragment} from 'react';
import { observer } from 'mobx-react';
import { Card, Row, Col, Pagination } from 'antd';
import store from "../../pages/generate/ordinary/Store";
import TableOperation from "./TableOperation";
import 'antd/dist/antd.css';
const { Meta } = Card;

@observer
class ActionCard extends React.Component {

    constructor(props) {
        super(props);
        this.state = {}
    }

    // 处理多选数据行
    rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            store.selected_ids = selectedRowKeys;
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
    };

    //处理排序、分页
    onChange = (pagination, filters, sorter, extra) => {
        if (sorter.field){
            store.searchMap["sort"] = (sorter.order === "descend" ? "-" : "") + sorter.field;
        }
        store.page = pagination.current;
        store.pageSize = pagination.pageSize;
        store.fetchRecords();
    };

    render() {
        return (
            <div style={{ padding: '24px' }}>
                {/* 流式布局主体 */}
                <Row gutter={[24, 24]} type="flex">
                    {store.records.map(product => (
                        <Col
                            key={product.id}
                            xs={24}
                            sm={12}
                            md={8}
                            lg={6}
                            xl={4}
                        >
                            <Card
                                hoverable
                                cover={
                                    <img
                                        alt={product.name}
                                        src={product.img}
                                        style={{ height: 200, objectFit: 'cover' }}
                                    />
                                }
                                actions={[
                                    <span style={{ color: '#1890ff' }}>¥{product.price}</span>,
                                    <span style={{ color: '#1890ff' }}>销量:{product.product_sales}</span>,
                                    <TableOperation info={product} config={store.hasPermissionAction}/>
                                ]}
                            >
                                <Meta
                                    title={product.name}
                                    description={product.description}
                                />
                            </Card>
                        </Col>
                    ))}
                </Row>

                {/* 分页控件 */}
                <div style={{ textAlign: 'center', marginTop: 24 }}>
                    <Pagination
                        current={store.page}
                        pageSize={store.pageSize}
                        total={store.total}
                        onChange={this.onChange}
                        showQuickJumper
                        showTotal={total => `共 ${total} 件商品`}
                    />
                </div>
            </div>
        );
    }
}

export default ActionCard
